<template>
    <!-- 分页组件 -->
    <div class="paging df-paging">
        <el-pagination
            v-if="type == 'md'"
            :page-sizes="sizeList"
            :page-size="Number(size)"
            :current-page="Number(currentPage)"
            layout="total,sizes,prev, pager, next"
            background
            :total="Number(total)"
            @current-change="pagecurrent"
            @size-change="pageSizeChange"
            :class="type"
        />
        <el-pagination
            :class="type"
            v-if="type == 'sm'"
            layout="prev, pager, next"
            :total="Number(total)"
            :current-page="Number(currentPage)"
            @current-change="pagecurrent"
            @size-change="pageSizeChange"
        />
    </div>
</template>
<script>
export default {
    props: {
        /**
         * 分页组件类型
         */
        type: {
            type: String,
            default: function() {
                return 'md'
            }
        },

        /**
         * 数据总条数
         */
        total: {
            type: Number,
            default: function() {
                return 0
            }
        },

        /**
         * 每页数据条数
         */
        size: {
            type: Number,
            default: function() {
                return '20'
            }
        },

        /**
         * 每页可选条数选择
         */
        sizeList: {
            type: Array,
            default: function() {
                return [10, 20, 50, 100]
            }
        },
        /**
         * 当前页码
         */
        currentPage: {
            type: Number,
            default: function() {
                return 1
            }
        }
    },
    methods: {
        pagecurrent(e) {
            this.$emit('PageNumber', e)
        },
        pageSizeChange(e) {
            this.$emit('PageSize', e)
        }
    }
}
</script>
